<template>
  <div class="index">
    <LoginTop/>
    <div class="login-m">
      <div class="hm-bd cur-direction-column">
        <div class="login-tip"><img src="../../assets/login-tip.png"></div>
        <div class="login-con">
          <div class="login-c-lf">
            <div class="login-c-log"><img src="../../assets/dlk-logo.png"></div>
            <div class="login-c-ecode"><img src="../../assets/login-ecode.png"></div>
            <div class="login-c-tip">
              <span>关注微信公众号</span>
              <p> 获取更多精彩资讯</p>
            </div>
          </div>
          <div class="login-c-rg">
            <div class="login-c-rg-top" id="login-change">
              <span class="login-c-se" onclick="loginChange('login-phone','login-email')">手机注册</span>
              <span onclick="loginChange('login-email','login-phone')">邮箱注册</span>
            </div>
            <!-- 手机号注册 -->
            <div class="login-phone" id="login-phone">
              <div class="login-p-num">
                <i>手机号：</i>
                <input v-model="phone" placeholder="请输入手机号" id="rephone" autocomplete="off">
                <p>请输入手机号</p>
              </div>
              <div class="login-p-yzm">
                <span>
                  <i>验证码：</i>
                  <input v-model="phoneCode" placeholder="请输入验证码" id="reyzm" autocomplete="off">
                  <p>请输入验证码</p>
                </span>
                <button @click="getDynamicRegisterCode()" id="regetyzm">免费获取动态码</button>
                <button class="buttonHide" id="regetyzmNo">
                  <i>60</i>秒后重新获取</button>
              </div>
              <div class="login-p-num">
                <i>设置密码：</i>
                <input v-model="password" placeholder="密码需包含6-16位字母加数字" type="password" id="rephpassword" autocomplete="off">
                <p>请设置密码</p>
              </div>
              <button @click="registerByPhone()" class="login-button" id="rephbut">注册</button>
            </div>
            <!-- 邮箱注册 -->
            <div class="login-email" style="display: none" id="login-email">
              <div class="login-p-num">
                <i>邮箱：</i>
                <input v-model="email" placeholder="请输入您的邮箱帐号" id="reemail" autocomplete="off">
                <p>请输入邮箱</p>
              </div>
              <div class="login-p-num">
                <i>密码：</i>
                <input v-model="emailPassword" placeholder="密码需包含6-16位字母加数字" type="password" id="reempassword" autocomplete="off">
                <p>请设置密码</p>
              </div>
              <button @click="registerByEmail()" class="login-button" id="reembut">注册</button>
            </div>
            <div class="login-bottom">
              <span class="login-b-lf">
                <input type="checkbox" v-model="accept" id="accept">
                <span>阅读并接受
                  <a href="javascript:void(0)" @click="linkToProtocol()">服务条款和保密协议</a>
                </span>
              </span>
              <span class="login-b-rg fr">
                <span>已有账号，
                  <a href="javascript:void(0)" @click="$router.push('/index')">立即登录</a>
                </span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer/>
  </div>
</template>
<script>
import $ from 'jquery'
import cookie from '@/utils/cookie'
import LoginTop from '@/components/login-top'
import Footer from '@/components/footer'
import * as api from '@/service/api'
export default {
  title: '用户中心-注册',
  components: {
    LoginTop,
    Footer
  },
  data () {
    return {
      globalThis: null,
      phone: null,
      phoneCode: null,
      password: null,
      email: null,
      emailPassword: null,
      accept: false,
      loading: false
    }
  },
  created () {
  },
  mounted () {
    let lis = $('#login-change span')
    $(lis).click(function () {
      $(lis).removeClass('login-c-se')
      $(this).addClass('login-c-se')
    })
    this.globalThis = window
    setTimeout(() => {
      window.registerVerify() // 注册验证
    }, 300)
  },
  methods: {
    async getDynamicRegisterCode () {
      try {
        let res = await api.getDynamicRegisterCode({
          phone: this.phone
        })
        console.log(res)
      } catch (err) {
        console.log(err)
      }
    },
    async registerByPhone () {
      try {
        if (/^1[3|4|5|7|8][0-9]{9}$/.test(this.phone) && this.password && this.phoneCode && this.accept) {
          let res = await api.registerByPhone({
            phone: this.phone,
            password: this.password,
            code: this.phoneCode,
            sourceAddress: cookie.get('referrer').split('?')[0],
            avatar: parseInt(Math.random() * 10)
          })
          sessionStorage.setItem('token', res.data.accessToken.value)
          cookie.set('device_id', res.data.accessToken.value)
          this.$store.dispatch('getUserInfo')
          this.$router.push('registerByPhoneSuccess')
        }
      } catch (err) {
        console.log(err)
      }
    },
    async registerByEmail () {
      try {
        if (/^[\w.-]+@(?:[a-z0-9]+(?:-[a-z0-9]+)*\.)+[a-z]{2,3}$/.test(this.email) && this.emailPassword && this.accept) {
          let msgHref = ''
          if (window.location.href.split(window.location.host)[1].slice(0, 9) === '/ucenter/') {
            msgHref = /^(.*\/\/[^/]*\/).*$/.exec(window.location.href)[1] + 'ucenter/'
          } else {
            msgHref = /^(.*\/\/[^/]*\/).*$/.exec(window.location.href)[1]
          }
          await api.registerByEmail({
            email: this.email,
            password: this.emailPassword,
            sourceAddress: cookie.get('referrer').split('?')[0],
            avatar: parseInt(Math.random() * 10),
            msg: `欢迎加入中亿财经网，请点击下方链接激活邮件！<br/> ${msgHref}#/registerByEmailSuccess?email=${this.email}`
          })
          this.$router.push(`activateEmail?email=${this.email}`)
          localStorage.setItem('registerByEmail', {
            email: this.email,
            password: this.emailPassword
          })
        }
      } catch (err) {
        console.log(err)
      }
    },
    linkToProtocol () {
      // window.open('/ucenter/#/protocol')
      this.$router.push('/protocol')
    }
  }
}
</script>
<style lang="scss">
.index {
}
</style>
